<template>
  <n-card :bordered="false" class="client" :segmented="true">
    <template #header>
      <n-space vertical>
        <n-input-group>
          <n-input v-model:value="name" placeholder="请输入客户端名称" />
          <n-button type="primary" @click="generateAccessUrl">添加</n-button>
        </n-input-group>
        <div v-if="showAccessUrl" class="access-info">
          接入地址：
          <span class="url">
            {{ accessUrl }}
          </span>
          <n-icon style="margin-left: 10px; cursor: pointer" @click="copy(accessUrl)">
            <Copy />
          </n-icon>
          <n-icon style="margin-left: 10px; cursor: pointer" @click="showAccessUrl = false">
            <close />
          </n-icon>
        </div>
      </n-space>
    </template>
    <n-grid x-gap="15" :cols="4" :y-gap="15">
      <n-gi v-for="server in clients" :key="server.id">
        <n-card
          class="client-card"
          :class="{ 'server-card-active': active === server.id }"
          size="small"
        >
          <template #header>
            <div class="title">
              <n-icon-wrapper
                :size="30"
                :border-radius="5"
                icon-color="#fff"
                :color="active === server.id ? '#45aaf2' : '#45aaf2'"
              >
                <n-icon>
                  <database-network-point />
                </n-icon>
              </n-icon-wrapper>
              <span class="text"> {{ server.name }}</span>
            </div>
          </template>
          <template #header-extra>
            <n-icon
              :size="18"
              style="cursor: pointer"
              color="#eb3b5a"
              @click.stop="server.ping = server.ping + 10"
            >
              <delete />
            </n-icon>
          </template>
          <n-descriptions
            label-align="right"
            label-placement="left"
            :column="1"
            size="small"
            class="server-descriptions"
          >
            <n-descriptions-item label="地址">
              {{ server.address }}
            </n-descriptions-item>
            <n-descriptions-item label="延迟">
              <span v-if="server.ping <= 100" style="color: #2ed573">{{ server.ping }}ms</span>
              <span v-else-if="server.ping < 500" style="color: #ffa502">{{ server.ping }}ms</span>
              <span v-else style="color: #ff4757">{{ server.ping }}ms</span>
            </n-descriptions-item>
            <n-descriptions-item label="接入时间">
              {{ server.accessTime }}
            </n-descriptions-item>
          </n-descriptions>
        </n-card>
      </n-gi>
    </n-grid>
  </n-card>
</template>

<script setup lang="ts">
import { Copy, Close, DatabaseNetworkPoint, Delete } from "@icon-park/vue-next"
import { ref, watch } from "vue"
import { doGenerateAccessUrl } from "../../../api/server/client-node-api"
import { useClipboard } from "@vueuse/core"

const clients = ref<
  Array<{
    id: number
    name: string
    address: string
    ping: number
    accessTime: string
  }>
>([])

const active = ref(1)

for (let i = 0; i < 10; i++) {
  clients.value.push({
    id: i,
    name: "新加坡",
    address: "111.111.111.111:9010",
    ping: (i + 1) * 50,
    accessTime: "2023-01-01 12:00:00"
  })
}

const showAccessUrl = ref(false)
const name = ref("")
const accessUrl = ref("")

function generateAccessUrl() {
  doGenerateAccessUrl(name.value).then((res) => {
    if (res) {
      showAccessUrl.value = true
      accessUrl.value = res.data
      name.value = ""
    }
  })
}

const { copy, copied } = useClipboard({ source: accessUrl })
watch(copied, () => {
  if (copied.value) {
    window.$message.info("复制成功")
  }
})
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
